<template>
	<view class="centerPage">
		<view class="topBlock">
			<view :class="{weatherBlock:true, weatherChangeBig:weatherChangeBig}">
				<view :class="{weatherImg:true, weatherImgChangeBig:weatherChangeBig}">
					<image :src="'../../static/weather/w' + (weather.observe?(weather.observe.weather_code + '.svg') :'00.svg')" style="height: 100%;width: 100%;"></image>
				</view>
				<view class="weatherNum" v-show="weatharSmallStyle">{{weather.observe?weather.observe.degree + '℃':'25℃'}}</view>
				<view class="weatherDate" v-show="weatharSmallStyle">{{weather.dateStr}}</view>
				<view class="weatherWeek" v-show="weatharSmallStyle">{{weather.weekStr}}</view>
				<view class="weatherBtn" v-show="weatharSmallStyle">
					<view class="weatherCity" v-show="weatharSmallStyle">{{addressObj.county?addressObj.county:addressObj.city}}</view>
					<view class="changeCity" @click.stop="weatherChangeBigFn" v-show="weatharSmallStyle">展开详细</view>
				</view>
				<view :class="{weatherBigImgCard:true, weatherBigImgCardChange:!weatharSmallStyle}" v-show="!weatharSmallStyle">
					<view class="weatherBigImgBack">
						<image :src="'../../static/weather/w' + (weather.observe?(weather.observe.weather_code + '.svg') :'00.svg')" style="height: 100%;width: 100%;"></image>
					</view>
					<view class="weatherBigNum">
						<view class="weatherTemp">
							<text class="fund-icon">
								{{weather.observe?weather.observe.degree:'25'}}
							</text>
							<text class="fund-unit">℃</text></view>
						<view class="weatherTip">
							{{weather.observe?((weather.forecast_24h[1].day_weather_short == weather.forecast_24h[1].night_weather)?
							weather.forecast_24h[1].day_weather_short:
							weather.forecast_24h[1].day_weather_short+ '转' + weather.forecast_24h[1].night_weather):'晴'}}&nbsp;
							{{weather.observe?weather.forecast_24h[1].day_wind_power+'级'+weather.forecast_24h[1].day_wind_direction:'3级微风'}}
							</view>
					</view>
					<view class="weatherAddress">
						<view style="display: flex;" @click="getLocation">
							<view class="addressImg">
								<image src="../../static/image/address.png"></image>
							</view>
							<view class="addressStr">{{addressObj.county?(addressObj.city + addressObj.county):addressObj.city}}</view>
						</view>
						<view class="weatherStr">
							{{weather.observe?weather.tips.observe[1]:'现在的温度比较舒适~'}}
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" show-scrollbar="false"
				:class="{weatherInformation:true, weatherInformationChange:!weatharSmallStyle}">
					<view v-show="!weatharSmallStyle">
						<view class="wetherTips">
							<view v-for="(item,index) in tipsData" :key="index" class="wetherSmallTip">
								<view class="smallTipImg">
									<image :src="'../../static/image/'+item.icon+'.png'" 
									:style="{'width':'50rpx', 'height':item.height, 'margin-top':item.top}"></image>
								</view>
								<view class="smallTipTitle">{{item.title}}</view>
								<view class="smallTipStr">{{item.value}}</view>
							</view>
						</view>
						<view v-show="!weather.observe" 
						style="width: 100%;text-align: center;margin-top: 50rpx;font-size: 34rpx;color: rgba(0, 0, 0, 0.4);">
							网络走丢了~
						</view>
						<view class="todayWeather" v-show="weather.observe">
							<view class="todayTitle">今日天气，预计温度范围
								{{weather.observe?weather.forecast_24h[1].min_degree:'25'}}°~
								{{weather.observe?weather.forecast_24h[1].max_degree:'30'}}°
							</view>
							<scroll-view scroll-x="true" show-scrollbar="false" class="todayDataScroll">
								<view class="todayDatas">
									<view class="todayData" v-for="(item,index) in forecast_1h" :key="index">
										<view class="todayDataTime">{{item.time}}</view>
										<view class="todayDataImg">
											<image :src="'../../static/weather/w'+item.weather_code+'.svg'" style="height: 100%;width: 100%;"></image>
										</view>
										<view class="todayDataInfo">{{item.degree}}°</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="weekWeather" v-show="weather.observe">
							<view class="weekTitle">未来七日天气预报</view>
							<view class="weekDayData" v-for="(item,index) in forecast_24h" :key="index">
								<view class="weekDate">
									<view class="weekStr">{{item.week}}</view>
									<view class="weekDateStr">{{item.date}}</view>
								</view>
								<view class="weekImgs">
									<image v-for="(code,key) in item.weatherCode" :key="key"
									:src="'../../static/weather/w' + code + '.svg'"></image>
								</view>
								<view class="weekWeatherStr">{{item.weatherShort}}</view>
								<view class="weekDegree">{{item.degree}}</view>
								<view class="weekWind">{{item.windPower}}级风</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="paymentBlock" @click="goNear">
				<view class="paymentBlockTopTitle">
					<view class="titleTip"></view>
					本月收支比
					<view style="line-height: 44rpx;font-size: 22rpx;font-weight: 500;margin-left: 4rpx;">(支/收)</view>
					</view>
				<view class="paymentBlockTop">
					<view class="paymentBlockTopRight">
						<view class="allBoxBack">
							<view class="allBoxColor" :style="{top: monthRatioShow + '%'}"></view>
							<view class="allBoxColor1" :style="{top: monthRatioShow + '%'}"></view>
							<view class="allBoxText">{{monthRatio}}%</view>
						</view>
					</view>
					<view class="paymentBlockTopLeft">
						<view class="statisticsStr">Hight</view>
						<view class="statisticsBox">
							<view class="statisticsBoxLine"></view>
						</view>
						<view class="statisticsStr">Low</view>
					</view>
				</view>
				<view class="paymentBlockBottom">
					<view class="bottomProgressOne">
						<view class="ProgressOneInTitle">本月收入</view>
						<view class="ProgressOneInNum">
							<view style="font-weight: 500; font-size: 30rpx;color: rgba(255, 255, 255, 0.9);max-width: 70%;overflow: hidden;text-overflow: ellipsis;">
								{{monthRevenue}}
							</view>
							<view style="letter-spacing: -1rpx; font-size: 16rpx;color: rgba(250, 250, 250, 1);margin-left: 4rpx;max-width: 25%;line-height: 56rpx;">
								↓元
							</view>
						</view>
					</view>
					<view class="bottomProgressTow">
						<view class="ProgressOneInTitle">本月支出</view>
						<view class="ProgressOneInNum">
							<view style="font-weight: 500; font-size: 30rpx;color: rgba(255, 255, 255, 0.9);max-width: 70%;overflow: hidden;text-overflow: ellipsis;">
								{{monthExpenditures}}
							</view>
							<view style="letter-spacing: -1rpx; font-size: 16rpx;color: rgba(250, 250, 250, 1);margin-left: 4rpx;max-width: 25%;line-height: 56rpx;">
								↑元
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<menuView></menuView>
	</view>
</template>

<script>
	import menuView from "../MenuView/menuView.vue"
	import {getQQWeather} from '../../api/API/api.js'
	export default {
		props: ['msg'],
		components: {
			menuView
		},
		data() {
			return {
				weatherChangeBig:false,
				weatharSmallStyle:true,
				weather: {},
				tipsData: [
					{icon: 'drying', title: '晾洗', value: '较适宜', height: '50rpx', top: '0rpx'},
					{icon: 'clothes', title: '穿衣', value: '炎热', height: '40rpx', top: '5rpx'},
					{icon: 'makeup', title: '化妆', value: '防脱水', height: '50rpx', top: '2rpx'},
					{icon: 'sunscreen', title: '防晒', value: '中等', height: '50rpx', top: '0rpx'},
					{icon: 'umbrella', title: '雨伞', value: '不带伞', height: '46rpx', top: '2rpx'},
					{icon: 'carwash', title: '洗车', value: '适宜', height: '44rpx', top: '3rpx'},
					{icon: 'fish', title: '垂钓', value: '不适宜', height: '50rpx', top: '0rpx'},
					{icon: 'tourism', title: '旅游', value: '较适宜', height: '50rpx', top: '2rpx'},
					{icon: 'sports', title: '运动', value: '较适宜', height: '50rpx', top: '0rpx'},
					{icon: 'mood', title: '心情', value: '较差', height: '50rpx', top: '2rpx'},
				],
				forecast_1h: [],
				forecast_24h: [],
				addressObj:{
					'province': '湖北',
					'city': '武汉',
					'county': '洪山区'
				},
				monthExpenditures: 0,
				monthRevenue: 0,
				monthRatio: 0,
				monthRatioShow: 0
			}
		},
		beforeMount() {
			let value = uni.getStorageSync('addressObj');
			if (value) {
				this.addressObj = JSON.parse(value)
			}else{
				let addressStr = JSON.stringify(this.addressObj)
				uni.setStorageSync('addressObj', addressStr);
			}
			this.weather = getApp().globalData.weatherData
			this.getWeather()
			this.getBooksData()
		},
		methods: {
			goNear(){
				uni.navigateTo({
					url: '../Region/nearRegion/nearRegion'
				});
			},
			getBooksData(){
				let timeElapsed = Date.now();
				let today = new Date(timeElapsed);
				today = today.toISOString()
				let nowDate = today.substr(0,10)
				let year = nowDate.substring(0,4)
				let month = nowDate.substring(0,7)
				let day = nowDate.substring(0)
				let spendDatas = uni.getStorageSync('storageDataJson');
				if (spendDatas) {
					let spendData = JSON.parse(spendDatas)
					if(!spendData[year] || !spendData[year][month]){
						this.monthExpenditures = 0
						this.monthRevenue = 0
						this.monthRatio = 0
					}else{
						this.monthExpenditures = spendData[year][month]['monthSum']['expenditures']
						this.monthRevenue = spendData[year][month]['monthSum']['revenue']
						if(this.monthRevenue !== 0){
							this.monthRatio = (this.monthExpenditures*100 / this.monthRevenue).toFixed(1)
						}else{
							this.monthRatio = 0
						}
					}
				}else{
					this.monthExpenditures = 0
					this.monthRevenue = 0
					this.monthRatio = 0
				}
				this.monthRatioShow = 100 - Number(this.monthRatio)
				if(this.monthRatioShow > 100){
					this.monthRatioShow = 100
					return
				}
				if(this.monthRatioShow < 0){
					this.monthRatioShow = 0
					return
				}
			},
			getLocation(){
				let that = this
				uni.chooseLocation({
					success: function (res) {
						if(!res.address){
							uni.showToast({
								title: '位置获取失败，请检查',
								icon: 'none',
								duration: 1000
							})
							return
						}
						let addressList = []
						let reg = /.+?(省|市|自治区|自治州|县|区)/g
						addressList = res.address.match(reg)
						if(addressList.length > 1){
							that.addressObj.province = addressList[0]
							that.addressObj.city = addressList[1]
							that.addressObj.county = ''
							if(addressList.length > 2){
								that.addressObj.county = addressList[2]
							}
						}else{
							uni.showToast({
								title: '暂未获取到该位置信息，请联系管理员',
								icon: 'none',
								duration: 2000
							})
							that.addressObj = {'province':'湖北', 'city':'武汉', 'county':'洪山区'}
						}
						that.getWeather()
					},
					fail: function (err){
						uni.showToast({
							title: '位置获取失败，请检查',
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			async getWeather(){
				let postData = this.addressObj
				let res = await getQQWeather(postData)
				res.data.data.observe.weather_code = res.data.data.forecast_1h[0].weather_code
				if(JSON.stringify(res.data.data.observe) === "{}"){
					if(this.addressObj.city === this.addressObj.province){
						uni.showToast({
							title: '暂未获取到该位置信息，请联系管理员',
							icon: 'none',
							duration: 2000
						})
						return
					}else{
						this.addressObj.county = this.addressObj.city
						this.addressObj.city = this.addressObj.province
						this.getWeather()
						return
					}
				}
				let addressStr = JSON.stringify(this.addressObj)
				uni.setStorageSync('addressObj', addressStr);
				this.weather = res.data.data
				getApp().globalData.weatherData = this.weather
				for(let i in this.tipsData){
					this.tipsData[i].value = this.weather.index[this.tipsData[i].icon].info
				}
				for(let i = 0; i < 25; i++){
					let obj = {
						time:this.weather.forecast_1h[i].update_time.substring(8,10)+':'+this.weather.forecast_1h[i].update_time.substring(10,12),
						weather_code:this.weather.forecast_1h[i].weather_code,
						degree:this.weather.forecast_1h[i].degree
					}
					if(i === 0){
						obj.time = '现在'
					}
					this.forecast_1h[i] = obj
				}
				for(let i = 1; i < 8; i++){
					let weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
					let week = this.weather.forecast_24h[i].time
					week = '周' + weekArray[new Date(week).getDay()]
					if(i === 1){
						this.weather.weekStr = '星期' + weekArray[new Date(this.weather.forecast_24h[i].time).getDay()]
						this.weather.dateStr = this.weather.forecast_24h[i].time.split('-')
						this.weather.dateStr = this.weather.dateStr[0] + ' / ' + this.weather.dateStr[1] 
						+ ' / ' + this.weather.dateStr[2]
						week = '今天'
					}
					let weatherCode = [this.weather.forecast_24h[i].day_weather_code]
					let weatherShort = this.weather.forecast_24h[i].day_weather_short
					if(this.weather.forecast_24h[i].day_weather_code !== this.weather.forecast_24h[i].night_weather_code){
						weatherCode[1] = this.weather.forecast_24h[i].night_weather_code
						weatherShort += '转' + this.weather.forecast_24h[i].night_weather_short
					}
					let windPower = this.weather.forecast_24h[i].day_wind_power
					if(this.weather.forecast_24h[i].day_wind_power !== this.weather.forecast_24h[i].night_wind_power){
						if(this.weather.forecast_24h[i].day_wind_power > this.weather.forecast_24h[i].night_wind_power){
							windPower = this.weather.forecast_24h[i].night_wind_power + '~' + windPower
						}else{
							windPower += '~' + this.weather.forecast_24h[i].night_wind_power
						}
					}
					let obj = {
						week: week,
						degree: this.weather.forecast_24h[i].min_degree + '°~' + this.weather.forecast_24h[i].max_degree+ '°',
						date:this.weather.forecast_24h[i].time.substring(5),
						weatherCode: weatherCode,
						weatherShort: weatherShort,
						windPower: windPower
					}
					this.forecast_24h[i-1] = obj
				}
				this.$forceUpdate()
			},
			weatherChangeBigFn(){
				this.weatherChangeBig = true
				this.$emit('changeBack','weatherChangeBig');
				setTimeout(()=>{
					this.weatharSmallStyle = false
				},190)
			}
		},
		watch: {
		    msg: {
		        handler(val) {
					if(val == 'weatherChangeSmall'){
						this.weatherChangeBig = false
						this.weatharSmallStyle = true
					}
		        },
		        deep: true, // 深度监听
		      },
		  }
	}
</script>

<style>
	::-webkit-scrollbar {
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	    color: transparent;
	}
	
	.centerPage{
		position: relative;
		top: 3%;
		width: 100%;
		/* height: calc(100vh - 350rpx); */
		height: calc(100vh - 400rpx);
		/* background-color: aqua; */
		overflow: hidden;
	}
	
	.topBlock{
		min-height: 430rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.weatherBlock{
		position: relative;
		flex-shrink: 0;
		height: 430rpx;
		width: 55%;
		border-radius: 20rpx;
		background-color: rgba(100, 100, 100, 0.25);
		transition: width 0.4s ease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out; 
	}
	
	.weatherChangeBig{
		height: calc(100vh - 400rpx);
		width: 100%;
		border-radius: 20rpx;
		background-color: rgba(250, 250, 250, 1);
	}
	
	.weatherImg{
		position: relative;
		z-index: 60;
		top: 0;
		left: 0;
		height: 170rpx;
		width: 150rpx;
		transition: width 0.4s ease-in-out, height 0.4s ease-in-out, top 0.4s ease-in-out, left 0.4s ease-in-out;
	}
	
	.weatherImgChangeBig{
		position: absolute;
		z-index: 60;
		/* top: 10rpx; */
		left: 60%;
		height: 260rpx;
		width: 260rpx;
		/* width: 100%; */
		overflow: hidden;
	}
	
	.weatherBigImgCard{
		opacity: 0;
		position: absolute;
		top: 100rpx;
		height: 270rpx;
		z-index: 50;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		box-shadow:  12rpx 12rpx 16rpx rgba(213, 213, 213, 0.3),
		             -10rpx -12rpx 14rpx rgba(213, 213, 213, 0.3);
		overflow: hidden;
		border-radius: 16rpx;
	}
	
	.weatherBigImgCardChange{
		background-color: rgba(255, 255, 255, 1);
		opacity: 1;
		transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
	}
	
	.weatherBigImgCard .weatherBigImgBack{
		position: absolute;
		z-index: 55;
		right: -100rpx;
		top: -65%;
		height: 400rpx;
		width: 400rpx;
		opacity: 0.28;
	}
	
	.weatherBigImgCard .weatherBigNum{
		height: 170rpx;
		width: 400rpx;
	}
	
	.weatherBigImgCard .weatherAddress{
		height: 70rpx;
		width: 630rpx;
		margin-top: 20rpx;
		display: flex;
	}
	
	.weatherBigImgCard .weatherAddress .addressImg{
		margin-left: 30rpx;
		margin-top: 8rpx;
		padding: 0;
		height: 50rpx;
		width: 50rpx;
		border-radius: 8rpx;
		/* background-color: blue; */
	}
	
	.weatherBigImgCard .weatherAddress .addressImg > image{
		margin: 4rpx 2rpx;
		height: 44rpx;
		width: 46rpx;
		position: absolute;
		opacity: 0.75;
	}
	
	.weatherBigImgCard .weatherAddress .addressStr{
		margin-top: 8rpx;
		height: 60rpx;
		margin-left: 8rpx;
		width: 192rpx;
		font-size: 32rpx;
		line-height: 60rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color: rgba(0, 164, 164, 0.6);
	}
	
	.weatherBigImgCard .weatherAddress .weatherStr{
		margin-top: 8rpx;
		height: 60rpx;
		margin-left: 2rpx;
		width: 360rpx;
		font-size: 32rpx;
		line-height: 60rpx;
		text-align: right;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-style:italic;
		padding-right: 10rpx;
		font-weight: 500;
		letter-spacing: -1rpx;
		color: rgba(0, 164, 164, 0.7);
	}
	
	.weatherBigImgCard .weatherBigNum .weatherTemp{
		height: 120rpx;
		margin-left: 46rpx;
	}
	
	.weatherBigImgCard .weatherBigNum .weatherTemp .fund-icon {
		  text-align: left;
		  line-height: 140rpx;
		  font-size: 120rpx;
		  font-weight: 600;
		  letter-spacing: 1rpx;
		  display: inline-block;
		  -webkit-background-clip: text;
		  color: transparent;
	      background-image: linear-gradient(to bottom,rgba(2, 234, 188, 0.5),rgba(1, 195, 156, 0.9));
	}
	
	.weatherBigImgCard .weatherBigNum .weatherTemp .fund-unit{
		text-align: left;
		margin-left: 8rpx;
		font-size: 50rpx;
		display: inline-block;
		-webkit-background-clip: text;
		color: transparent;
		background-image: linear-gradient(to bottom,rgba(2, 234, 188, 0.5),rgba(1, 195, 156, 0.9));
	}
	
	.weatherBigImgCard .weatherBigNum .weatherTip{
		height: 50rpx;
		margin-left: 52rpx;
		text-align: left;
		line-height: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(0, 164, 164, 0.9);
	}
	
	.weatherBlock .weatherNum{
		height: 60rpx;
		width: 150rpx;
		font-size: 44rpx;
		line-height: 42rpx;
		text-align: center;
		letter-spacing: 3rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}
	
	.weatherBlock .weatherDate{
		margin-top: 6rpx;
		margin-left: 22rpx;
		line-height: 42rpx;
		font-size: 34rpx;
		font-weight: 500;
		font-style:oblique;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.weatherBlock .weatherWeek{
		margin-left: 22rpx;
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 1rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.weatherBlock .weatherBtn{
		margin-top: 16rpx;
		margin-left: 24rpx;
		height: 74rpx;
		font-weight: 500;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.weatherBlock .weatherBtn .weatherCity{
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		color: rgba(255, 255, 255, 0.9);
	}
	
	.weatherBlock .weatherBtn .changeCity{
		height: 54rpx;
		width: 150rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 54rpx;
		letter-spacing: 1rpx;
		background: linear-gradient(to right,rgba(200, 200, 200, 0.2),rgba(200, 200, 200, 0.4),rgba(200, 200, 200, 0.6));
		color: rgba(245, 245, 255, 1);
	}
	
	.weatherChangeBig .weatherInformation{
		/* margin-left: 20rpx; */
		margin-bottom: 100rpx;
		box-sizing: border-box;
		width: 700rpx;
		height: 0;
		opacity: 0;
		transition: opacity 0.6s, height 0.8s ease-in-out, margin-top 0.7s ease-in-out;
	}
	
	.weatherChangeBig .weatherInformationChange{
		position: relative;
		z-index: 30;
		opacity: 1;
		height: calc(100vh - 800rpx);
		overflow-y: auto;
		margin-top: 300rpx;
		transition: opacity 0.6s, height 0.8s ease-in-out, margin-top 0.7s ease-in-out;
	}
	
	.weatherChangeBig .weatherInformation .wetherTips{
		width: 640rpx;
		margin-left: 30rpx;
		height: 250rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
	}
	
	.weatherChangeBig .weatherInformation .wetherSmallTip{
		width: 120rpx;
		height: 114rpx;
		margin: auto 4rpx;
	}
	
	.weatherInformation .wetherSmallTip .smallTipImg{
		width: 50rpx;
		height: 50rpx;
		margin: auto;
	}
	
	.weatherInformation .wetherSmallTip .smallTipImg > image{
		position: absolute;
	}
	
	.weatherInformation .wetherSmallTip .smallTipTitle{
		width: 120rpx;
		height: 28rpx;
		font-size: 18rpx;
		color: rgba(0, 0, 0, 0.5);
		line-height: 28rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		/* background-color: blanchedalmond; */
	}
	
	.weatherInformation .wetherSmallTip .smallTipStr{
		width: 120rpx;
		height: 30rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: rgba(50, 50, 50, 0.8);
		line-height: 30rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		/* background-color: brown; */
	}
	
	.weatherChangeBig .weatherInformation .todayWeather{
		width: 700rpx;
		margin-top: 20rpx;
		height: 260rpx;
	}
	
	.weatherInformation .todayWeather .todayTitle{
		width: 670rpx;
		height: 40rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.9);
		font-weight: 500;
	}
	
	.weatherChangeBig .weatherInformation .todayDataScroll{
		width: 640rpx;
		height: 210rpx;
		margin-top: 14rpx;
		margin-left: 30rpx;
	}
	
	.weatherInformation .todayDatas{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 100%;
	}
	
	.weatherInformation .todayDatas .todayData{
		flex-shrink: 0;
		width: 110rpx;
		height: 202rpx;
		margin: 2rpx 14rpx 10rpx 0;
		border-radius: 120rpx;
		background-color: rgb(255, 255, 255);
		font-size: 0rpx;
	}
	
	.todayDatas .todayData .todayDataTime{
		width: 110rpx;
		height: 60rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 24rpx;
		color: rgba(0, 138, 138, 0.7);
	}
	
	.todayDatas .todayData .todayDataImg{
		width: 62rpx;
		height: 62rpx;
		margin: auto;
	}
	
	.todayDatas .todayData .todayDataInfo{
		margin-left: 10rpx;
		width: 100rpx;
		height: 70rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(0, 138, 138, 0.6);
	}
	
	.weatherInformation .weekWeather{
		width: 700rpx;
		margin-top: 20rpx;
	}
	
	.weatherInformation .weekWeather .weekTitle{
		width: 670rpx;
		height: 50rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.9);
		font-weight: 500;
	}
	
	.weatherInformation .weekDayData{
		width: 640rpx;
		height: 110rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
		margin-bottom: 2rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		background-color: rgb(0, 138, 138, 0.05);
		display: flex;
		flex-direction: row;
	}
	
	.weatherInformation .weekDayData > view{
		white-space: nowrap;
		overflow: hidden;
	}
	
	.weatherInformation .weekDayData .weekDate{
		width: 100rpx;
		height: 110rpx;
	}
	
	.weatherInformation .weekDayData .weekDate .weekStr{
		width: 100rpx;
		height: 60rpx;
		font-size: 32rpx;
		font-weight: 500;
		letter-spacing: 3rpx;
		line-height: 90rpx;
		text-align: center;
	}
	
	.weatherInformation .weekDayData .weekDate .weekDateStr{
		width: 100rpx;
		height: 50rpx;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 30rpx;
		text-align: center;
		color: rgba(0, 0, 0, 0.4);
	}
	
	.weatherInformation .weekDayData .weekImgs{
		width: 110rpx;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.weatherInformation .weekDayData .weekImgs > image{
		width: 50rpx;
		height: 50rpx;
	}
	
	.weatherInformation .weekDayData .weekWeatherStr{
		width: 200rpx;
		height: 110rpx;
		font-size: 26rpx;
		line-height: 110rpx;
		text-align: center;
	}
	
	.weatherInformation .weekDayData .weekDegree{
		width: 110rpx;
		height: 110rpx;
		font-size: 26rpx;
		line-height: 110rpx;
		text-align: center;
	}
	
	.weatherInformation .weekDayData .weekWind{
		width: 130rpx;
		height: 110rpx;
		font-size: 26rpx;
		line-height: 110rpx;
		text-align: center;
	}
	
	.paymentBlock{
		box-sizing: border-box;
		padding: 20rpx 0 10rpx 0;
		flex-shrink: 0;
		height: 430rpx;
		width: 43%;
		border-radius: 20rpx;
		position: relative;
		/* background-color: rgba(100, 100, 100, 0.25); */
		background-color: rgba(200, 200, 200, 0.4);
	}
	
	.paymentBlock .paymentBlockTopTitle{
		width: 100%;
		margin-bottom: 10rpx;
		height: 40rpx;
		box-sizing: border-box;
		padding-left: 10rpx;
		color: rgba(240, 240, 240, 0.9);
		font-size: 26rpx;
		line-height: 42rpx;
		font-weight: 600;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.paymentBlock .paymentBlockTopTitle .titleTip{
		width: 16rpx;
		height: 16rpx;
		margin: 12rpx 10rpx;
		border-radius: 100%;
		background-color: rgba(234, 85, 20, 0.5);
	}
	
	.paymentBlock .paymentBlockTop{
		width: 100%;
		height: 240rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopRight{
		margin-left: 8%;
		width: 42%;
		height: 240rpx;
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopRight .allBoxBack{
		margin-left: 20%;
		width: 75%;
		height: 238rpx;
		border-radius: 150rpx;
		background: rgba(185, 185, 185, 0.65);
		box-shadow: inset 18rpx 18rpx 40rpx rgba(240, 240, 240, 0.7),
		            inset -18rpx -18rpx 40rpx rgba(240, 240, 240, 0.7);
		position: relative;
		box-sizing: border-box;
		z-index: 10;
		border: 2rpx solid rgba(240, 240, 240, 0.7);
		overflow: hidden;
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopRight .allBoxBack .allBoxColor{
		position: absolute;
		left: calc(-50% - 150rpx);
		/* top: 47%; */
		/* 100%到0% 为 0到100 */
		width: 476rpx;
		height: 476rpx;
		/* background: linear-gradient(to right, rgba(236, 84, 19, 0.55) 0%, rgba(234, 85, 20, 1.0) 50%, rgba(236, 84, 19, 0.55) 100%); */
		background: rgba(234, 85, 20, 0.55);
		border-radius: 45% 46% 47% 44%;
		animation: allBoxRotate 12s linear -4s infinite;
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopRight .allBoxBack .allBoxColor1{
		position: absolute;
		left: calc(-50% - 150rpx);
		/* top: 47%; */
		/* 100%到0% 为 0到100 */
		width: 476rpx;
		height: 476rpx;
		background: rgba(236, 84, 19, 0.35);
		border-radius: 47% 45% 46% 47%;
		animation: allBoxRotate 10s linear -4s infinite;
	}
	
	@keyframes allBoxRotate {
	   to {
	        transform: rotate(360deg);
	    }
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopRight .allBoxBack .allBoxText{
		position: absolute;
		left: 2rpx;
		bottom: 2rpx;
		width: calc(100% - 4rpx);
		height: 53%;
		font-size: 22rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		line-height: 50rpx;
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopLeft{
		width: 40%;
		height: 240rpx;
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopLeft .statisticsBox{
		width: 30%;
		margin-left: 50%;
		height: 178rpx;
		border-top: 2rpx solid rgba(230, 230, 230, 0.75);
		border-bottom: 2rpx solid rgba(230, 230, 230, 0.75);
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopLeft .statisticsBox .statisticsBoxLine{
		width: 50%;
		height: 100%;
		float: left;
		border-right: 2rpx dashed rgba(230, 230, 230, 0.75);
	}
	
	.paymentBlock .paymentBlockTop .paymentBlockTopLeft .statisticsStr{
		margin-left: 25%;
		width: 75%;
		height: 30rpx;
		font-size: 22rpx;
		font-weight: 600;
		letter-spacing: 0;
		text-align: center;
		line-height: 25rpx;
		color: rgba(236, 236, 236, 0.85);
	}
	
	.paymentBlockBottom{
		margin-top: 10rpx;
		height: 100rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.paymentBlockBottom .bottomProgressOne{
		height: 100rpx;
		width: 43%;
		margin: 0 2%;
	}
	
	.paymentBlockBottom .ProgressOneInNum{
		height: 50rpx;
		line-height: 40rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items:flex-start;
	}
	
	.paymentBlockBottom .ProgressOneInNum > view{
		height: 40rpx;
		line-height: 50rpx;
		white-space: nowrap;
	}
	
	.paymentBlockBottom .ProgressOneInTitle{
		height: 40rpx;
		width: 100%;
		font-size: 20rpx;
		font-weight: 600;
		line-height: 50rpx;
		text-align: center;
		color: rgba(250, 250, 250, 0.9);
	}
	
	.paymentBlockBottom .bottomProgressTow{
		height: 100rpx;
		width: 43%;
		margin: 0 2%;
	}
</style>